<html>
<style>
    .div1 {
        position: relative;
        width: 300px;
        height: 300px;
        background: grey;
    }

    .div2 {
        width: 200px;
        height: 200px;
        background: yellow;
    }

    .div3 {
        width: 100px;
        height: 100px;
        background: red;
    }

    .div2,
    .div3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
</style>

<body>
    <div class="div1">
        div1
        <div class="div2">
            div2
            <div class="div3">
                div3
            </div>
        </div>
    </div>
</body>
<script>
    function getElement(className) {
        return document.querySelector(className)
    }

    const div1 = getElement('.div1');
    const div2 = getElement('.div2');
    const div3 = getElement('.div3');

    div1.addEventListener('click', () => {
        console.log('冒泡 event: div1 click')
    });
    div1.addEventListener('click', () => {
        console.log('捕获 event: div1 click')
    }, true);

    div2.addEventListener('click', () => {
        console.log('冒泡 event: div2 click')
    });
    div2.addEventListener('click', () => {
        console.log('捕获 event: div2 click')
    }, true);


    //  在事件流到达目标阶段（div3）这个时候，哪一种事件优先注册，就会优先执行那个事件，
    ///上面的代码中我们可以看到div3上优先注册了冒泡阶段的事件，所以先输出"冒泡 event: div3 click"再输出"捕获 event: div3 click"，
    // 小伙伴可以去亲自试一下，调整一下事件的注册顺序。
    
    div3.addEventListener('click', () => {
        console.log('冒泡 event: div3 click')
    });
    div3.addEventListener('click', () => {
        console.log('捕获 event: div3 click')
    }, true);
</script>

</html>